<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>菜品列表</title>
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" href="../../static/layui/css/layui.css"
          media="all"/>
    <style>
        body {
            margin: 10px;
            background: #eeeeee;
        }

        .flow-default {
            width: 100%;
            height: 100%;
            overflow: auto;
            font-size: 0;
        }

        .flow-default li {
            display: inline-block;
            margin: 10px 1%;
            font-size: 14px;
            width: 18%;
            height: 280px;
            background-color: #FFFFFF;
            border-radius: 4px
        }

        .flow-default img {
            width: 88%;
            height: 100%;
            border-radius: 4px
        }

        .flow-default .div-img {
            height: 70%;
            line-height: 70%;
            padding: 10px 0px 4px 0px;
            text-align: center;
        }

        .flow-default .content {
            height: 20%;
            width: 88%;
            padding: 0px 6%;
        }

        .flow-default .content li {
            width: 100%;
            height: 50%;
            line-height: 30px;
            margin: 0px;
            text-align: left;
            border-radius: 0px;
            overflow: hidden;
            font-size: 16px;
        }

        .site-demo-flow img {
            width: 40%;
            height: 200px;
            margin: 0 2px 5px 0;
            border: none;
        }

        .store {
            float: left;
            font-size: 12px;
        }
    </style>
</head>
<body>
<ul class="layui-card  flow-default" id="content" style="background:#eeeeee">

</ul>
<script th:src="@{/layuiadmin/layui/layui.js}" src="../../static/layuiadmin/layui/layui.js"></script>
<script th:inline="javascript">
    var Jquery;

    function clearChoice(goodsId) {
        var goodsItems = Jquery("#content").children("li");
        for (var i = 0; i < goodsItems.size(); i++) {
            var item = goodsItems[i];
            var id = Jquery(item).find("input[name='goodsId']").val();
            if (id === goodsId) {
                Jquery(item).find(".chickClick").css({"background": "none", "color": "#AF2825"});
            }
        }
    }
    function clearAllChoice() {
        var goodsItems = Jquery("#content").children("li");
        for (var i = 0; i < goodsItems.size(); i++){
            var item = goodsItems[i];
            Jquery(item).find(".chickClick").css({"background": "none", "color": "#AF2825"});
        }
    }
    layui.use(['flow', "jquery", "layer"], function () {
        var flow = layui.flow;
        var $ = layui.jquery;
        var layer = layui.layer;
        Jquery = $;
        var pageSize = 10;
        flow.load({
            elem: '#content' //流加载容器
            , done: function (pageNum, next) { //执行下一页的回调
                //模拟数据插入
                setTimeout(function () {
                    var lis = [];
                    console.log("pageNum", pageNum);
                    $.ajax({
                        type: 'POST'
                        , url: '/restaurant/guest/goodslist.do'
                        , data: {
                            pageNum: pageNum,
                            pageSize: pageSize,
                            categoryId: [[${categoryId}]]
                        }
                        , dataType: "JSON"
                        , success: function (res) {
                            if (res.code == 200) {
                                var infos = res.data;
                                console.log("infos", infos);
                                layui.each(infos, function (index, item) {
                                    html = parseHtml(item);
                                    lis.push(html);
                                });
                                var pages = parseInt(((res.count - 1) / pageSize)) + 1;
                                console.log("pages", pages);
                                next(lis.join(''), pageNum < pages); //假设总页数为 10
                            } else {
                                layer.alert(res.msg, {
                                    title: '提交结果'
                                    , anim: 6
                                });
                            }
                        }
                    })

                    function parseHtml(info) {
                        var html = '<li class="goods-item">' +
                            '<input type="hidden" name="goodsId" value="' + info["goodsId"] + '">' +
                            '<input type="hidden" name="soldState" value="' + info["soldState"] + '">' +
                            '<div class="div-img"><img src="/restaurant' + info["imgUrl"] + '"></div>' +
                            '<ul class="content">' +
                            '<li class="goodName">' + info["goodsName"] + '</li>' +
                            '<li style="color: #AF2825"><b style="float: left">￥</b>' +
                            '<span style="float: left" class="price">' + info["price"] + '</span>' +
                            '<b style="margin-left: 10px" class="store">共</b><span class="storeCount store" style="float: left">' + info["storeCount"] + '</span><b class="store">份</b>' +
                            '<button class="layui-btn layui-btn-primary chickClick" style="display:inline-block;float:right;width:60px;font-size:12px;padding:0px 4px;color:#AF2825;height:28px;line-height:28px;text-align:center;border-radius:25px;border: 1px solid #AF2825;">来一份</button>' +
                            '</li>' +
                            '</ul>' +
                            '</li>'
                        return html;
                    }

                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                }, 500);
            }
        })
        //flow.lazyimg();
        //给body下的所有 .chickClick 动态添加点击事件
        $("body").on("click", ".chickClick", function (e) {
            var goodsItem = $(this).parents(".goods-item")[0];
            var soldState = $(goodsItem).find("input[name='soldState']").val();//售馨
            console.log("soldState", soldState);
            if (soldState == '1') {
                layer.msg("该菜已售馨！", {icon: 5});
                return;
            }
            $(this).css({"background-color": "#AF2825", "color": "#ffffff"});
            if ($(this).css("background-color") === "rgb(175, 40, 37)") {
                layer.msg("已选该菜！", {icon: 6});
                return;
            }
            var price = $(goodsItem).find(".price").text();
            var goodsId = $(goodsItem).find("input[name='goodsId']").val();
            var storeCount = $(goodsItem).find(".storeCount").text();
            var imgSrc = $(goodsItem).find("img").attr("src");
            var goodsName = $(goodsItem).find(".goodName").text();
            var goods = new Goods(price, imgSrc, goodsId, goodsName,storeCount);
            parent.addGoodsByOrder(goods);
        });

        function Goods(price, imgSrc, goodsId, goodsName,storeCount) {
            this.price = price;
            this.imgSrc = imgSrc;
            this.goodsId = goodsId;
            this.goodsName = goodsName;
            this.storeCount = storeCount;
        }
    });
</script>
</body>
</html>